﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>商品详情</title>
    <link rel="stylesheet" href="css/animate.css"/>
    <link rel="stylesheet" href="css/font-awesome.min.css"/>
    <link rel="stylesheet" href="css/flexslider.css"/>
    <link rel="stylesheet" href="css/base.css?20150803"/>
    <style type="text/css">
        .ms-controller, [ms-controller] {
            display: none;
        }
    </style>
</head>
<body ms-controller="shopitem">

<!-- header 顶部 -->
<header>
     <a href="index.html" style="padding-left:10px;"><img src="images/e-jialogo.png" alt="" style="width:500px;height:70px;" /></a>
    <span class="right">
       <input type="text" class="headInput" id="keyinput" placeholder="输入商品名称"/><input type="button" class="headBtn" id="btnsearch" value="搜索"/>
    </span>
</header>

<!-- menu 菜单 -->
<!--<menu>
    <li class="active"><a href="#">电器</a></li>
    <li><a href="#">数码</a></li>
    <li><a href="#">手机</a></li>
    <li><a href="#">电脑</a></li>
    <li><a href="#">服装</a></li>
    <li><a href="#">鞋帽</a></li>
    <hr/>
    <li><a href="#">厨卫</a></li>
    <li><a href="#">日用品</a></li>
    <li><a href="#">护理化妆</a></li>
    <li><a href="#">营养保健</a></li>
    <li><a href="#">食品</a></li>
    <li><a href="#">本地商品</a></li>
</menu>-->

<div class="road" style="border-top:1px solid #ddd;">
    <a href="javascript:history.back(-1)"><i class="fa fa-angle-left"></i></a>
    {{ctdata.Title}}
    <hr/>
</div>

<div class="goodDetail" >
    <div class="goodLeft">
        <div class="flexslider flexslider_thumb">
            <ul class="slides" >
                <li ms-repeat-el="ctimg" ms-attr-data-thumb="{{el.ImgUrl}}">
                    <img ms-src="{{el.ImgUrl}}"/>
                </li>
                
            </ul>
        </div>

        <h3 class="promise"><span class="promiseTitle">我们的承诺</span>
            <hr/>
            <br style="clear: both;"/>
            <span>
                <img src="images/sdd.jpg" />
            </span>
            <!--<span class="pblock promise1">
                <img src="./images/promise1.jpg" alt=""/><br/>
                说明文字说明文字说明文字说明文字说
            </span>

            <span class="pblock promise2">
                <img src="./images/promise2.jpg" alt=""/><br/>
                说明文字说明文字说明文字说明文字说
            </span>

            <span class="pblock promise3">
                <img src="./images/promise3.jpg" alt=""/><br/>
                说明文字说明文字说明文字说明文字说
            </span>-->


        </h3>

    </div>
    <div class="goodRight">
        <div><span class="attr">产品名称：</span>

            <p>{{ctdata.Title}}</p>

            <p class="desc">
                {{ctdata.Summary}}
            </p>
        </div>


        <div class="priceBlock"><span class="attr">E+惠<br/>惊爆价</span>
            <em class="goodPrice">￥{{ctdata.Price2}}元</em>
            <del>市场价：{{ctdata.Price1}}元</del>
        </div>
        <div class="discount">折扣：{{parseInt((ctdata.Price2/ctdata.Price1)*10)}}折</div>


        <div ms-repeat-el="SPSX1" class="spsx_list"><span class="attr"><span class="attrname">{{el.sxname}}</span>：</span>
             {{el.sxvalue|html}}
        </div>

        <div><span class="attr">购买数量：</span>

            <p class="shopNumber">
                <a href="javascript:;" class="btn-minus">-</a>
                <span class="number">1</span>
                <a href="javascript:;" class="btn-add">+</a>
            </p>
        </div>

        <div class="btnWrap"><a href="javascript:void(0);" class="btnBuy" ms-click="addcart()" >加入购物车</a></div>

    </div>
</div>

<div class="tab-container">
    <ul class="nav-tabs">
        <li class="active">商品详情</li>
        <!--<li>评价详情</li>-->
    </ul>
    <div class="tab-content">
        <div class="tab-pane active">

            {{ctdata.Details|html}}

        </div>
        <div class="tab-pane">
            评价内容！
        </div>
    </div>
</div>

    <div class="modal animated bounceIn" style="width:500px;">
        <div class="modal_header">已加入购物车<a href="javascript:void(0);" class="closeModal"><i class="fa fa-times-circle"></i></a> </div>
        <div class="modal_body">
            <p class="textColor textLg">恭喜您，已加入购物车！</p>
        </div>
        <div class="modal_footer">
            <a href="shopcart.html" class="btnPay">好的，我现在去购物车结算</a>
        </div>

    </div>
<div class="backTop">
    <a href="javascript:;" class="btnBack"><i class="fa fa-chevron-up"></i></a>
    <a href="shopcart.html"><i class="fa fa-shopping-cart"></i></a>
</div>

<script src="js/jquery.min.js"></script>
<script src="js/jquery.flexslider-min.js"></script>
<script src="js/avalon.mobile.min.js"></script>
<script src="js/MobileCom.js"></script>
<script src="js/cartjs.js?v=123"></script>
<script>

    var id = MobileCom.getQueryString("id");

    var model1 = avalon.define({
        $id: "shopitem",
        ctdata: {},
        ctimg: [],
        SPSX1: [],
        addcart: function () {
            var id = model1.ctdata.ID;

            var prd =
                {
                    "id": model1.ctdata.ID,
                    "name": model1.ctdata.Title,
                    "num": $(".shopNumber .number").text(),
                    "price": model1.ctdata.Price2,
                    "imgurl": model1.ctimg[0].ImgUrl
                };

            cart.addproduct(prd);
           
            showModal();

        }
    })

    function showModal() {
        $(".modal").addClass("bounceIn").show();
        $(".backMasker").show();
    }


    $(function () {
        if (window.localStorage.getItem("EUser") == null) {
            window.location = "login.html";
        }

        $.getJSON("/View/SpeList/DLLAjaxHandler.ashx?action=GetSPXQ", { "SPID": id }, function (result) {
            if (result.length > 0) {
                var r = result[0];
                model1.ctdata = r;
                var imgList = "";
                for (var v in r.ImgUrl.split(',')) {
                    if (imgList == "") {
                        imgList += '{"ImgUrl":"' + r.ImgUrl.split(',')[v] + '"}';
                    } else {
                        imgList += ',' + '{"ImgUrl":"' + r.ImgUrl.split(',')[v] + '"}';
                    }
                }

                model1.ctimg = $.parseJSON("[" + imgList + "]");

                $(".flexslider_thumb").flexslider({
                    animation: "slide",
                    controlNav: "thumbnails",
                    slideshowSpeed: 4000, //展示时间间隔ms
                    animationSpeed: 400, //滚动时间ms
                    touch: true //是否支持触屏滑动
                });

                var sts = $.parseJSON(r.SPSX1);
                $(sts).each(function (index, item) {
                    var xn = "";
                    var idx = 0;
                    for (var v in item.sxvalue.split(',')) {
                        if (idx++ == 0) {
                            xn += '<a href="javascript:;" class="chosenItem active">' + item.sxvalue.split(',')[v] + '</a>';
                        } else {
                            xn += '<a href="javascript:;" class="chosenItem">' + item.sxvalue.split(',')[v] + '</a>';
                        }
                    }

                    item.sxvalue = xn;

                })

                model1.SPSX1 = sts;

                $(".chosenItem").click(function () {
                    $(this).siblings().removeClass("active").end().addClass("active");
                })
            }

        })

        $("#btnsearch").click(function () {
            window.location = "search.html?key=" + $("#keyinput").val();
        })
        $("#keyinput").keydown(function (e) {

            if (e.keyCode == 13) {
                window.location = "search.html?key=" + $("#keyinput").val();
            }
        })


        $(".nav-tabs li").click(function () {
            var index = $(this).index();
            $(this).siblings().removeClass("active").end().addClass("active");
            $(this).parent(".nav-tabs").siblings(".tab-content").find(".tab-pane").removeClass("active");
            $(this).parent(".nav-tabs").siblings(".tab-content").find(".tab-pane:eq(" + index + ")").addClass("active");

        })

       

        //点加号
        $(".btn-add").click(function () {
            var n = parseInt($(this).parent().find(".number").text());
            $(this).parent().find(".number").text(n + 1);
        });

        //点减号
        $(".btn-minus").click(function () {
            var n = parseInt($(this).parent().find(".number").text());
            if (n > 1) {
                $(this).parent().find(".number").text(n - 1);
            }
        })

        //回到顶部
        $(".btnBack").click(function () {
            $('html,body').animate({scrollTop: 0}, 500);
        });

        $(".closeModal").click(function () {
            $(this).parents(".modal").removeClass("bounceIn").addClass("bounceOut");
            setTimeout(function () {
                $(".backMasker").hide();
                $(".modal").hide().removeClass("bounceOut");
            }, 500)
        })


    });

   

    
</script>
</body>
</html>